<template>
	<view>
		<u-checkbox-group size="45" active-color="#000">
			<view class="detailback" v-for="(item,index) in menu" @click="select(index)">
				<image class="img_detail" src="../../static/users/shop.png" mode="aspectFill"></image>
				<view class="title">
					灶门炭治郎手办,鬼灭之刃组合手办强...组合手办强...
					灶门炭治郎手办,鬼灭之刃组合手办强...组合手办强...
				</view>
				<view class="have">
					XXX商品 ×1
				</view>
				<view class="price">
					<text>¥</text>
					366
				</view>
				<u-checkbox class="radio" v-model="item.checked" shape="circle" :disabled="false"></u-checkbox>
			</view>
		</u-checkbox-group>
		<view class="bottom"></view>
		<view class="over" @click="over">
			完成
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				menu: [{
					num: 1,
					checked: false
				}, {
					num: 1,
					checked: false
				}, {
					num: 1,
					checked: false
				}, {
					num: 1,
					checked: false
				}, {
					num: 1,
					checked: false
				}, {
					num: 1,
					checked: false
				}, {
					num: 1,
					checked: false
				}, {
					num: 1,
					checked: false
				}],
				value: ""
				
			}
		
	},
	methods: {
		select(index) {
			this.menu[index].checked = !this.menu[index].checked
		},
		over() {
			uni.redirectTo({
				url: "../shopguan/shopguan"
			})
		}
	}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F4FA;
	}
	.over {
		position: fixed;
		bottom: 50rpx;
		left: 30rpx;
		width: 690rpx;
		height: 100rpx;
		background: #181818;
		box-shadow: 0px 10rpx 40rpx 0px rgba(24, 24, 24, 0.26);
		border-radius: 50rpx;
	
		text-align: center;
		line-height: 100rpx;
	
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	.bottom{
		width: 750rpx;
		height: 300rpx;
	}
	.radio {
		position: absolute;
		right: 30rpx;
		bottom: 43rpx;
	}

	.detailback {
		margin: 15rpx 30rpx;
		height: 210rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		width: 690rpx;
		position: relative;
	}

	.img_detail {
		margin: 20rpx 0 0 30rpx;
		width: 180rpx;
		height: 150rpx;
		border-radius: 20rpx;
	}

	.title {
		position: absolute;
		top: 17rpx;
		left: 232rpx;
		width: 420rpx;
		height: 80rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		// overflow: hidden;
		// white-space: nowrap;
		// text-overflow: ellipsis;
	}

	.have {
		position: absolute;
		left: 232rpx;
		bottom: 43rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 300;
		color: #666666;
	}

	.price {
		position: absolute;
		bottom: 43rpx;
		right: 150rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF4646;

		text {
			font-size: 20rpx;
		}
	}
</style>
